.step1 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  color: white;
  font-size: 24px;
  gap: 10px;

  .step11 {
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    background-color: #eb4d4b;
  }

  .step12 {
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 4;
    grid-column-end: 5;
    background-color: #f0932b;
  }

  .step13 {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: #e056fd;
  }

  .step14 {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    background-color: #22a6b3;

    .step14_flex_col {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 0 20px;

      >div {
        background-color: black;
      }
    }
  }

  .step15 {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 4;
    background-color: #686de0;
  }
}
